import { lazy } from 'react'
/* -------------------------------------------------------- Declare -- */
const { $lazy, $config } = window
/* -------------------------------------------------------- Async Component -- */
const SearchTable = $lazy.hook(()=>import('#cpt/temp/SearchTable'))
const PickFolder = lazy(()=>import('#cpt/form-element/pick-folder'))
const Button = $lazy.load(()=>import('@antd/button'))
/* -------------------------------------------------------- Page Component -- */
const width = '50%'
export const Component = () => {
	// 编辑添加配置
	const addConfig = {
		modal: {
			width 		: '60%',
		},
		form: {
			labelWidth 	: 's8',
			param: {
				
			},
			data: [
				{ label: '项目名称',			name: 'title', 			r:1, maxLen:30, width },
				!$config.isNative ? null : { label: '后台开发目录',  	name: 'folder', slot: v => <PickFolder {...v}/>, maxLen:35, width, r:1},
				!$config.isNative ? null : { label: '前端开发目录',  	name: 'folder_front', slot: v => <PickFolder {...v}/>,  maxLen:35, width, r:1},
				!$config.isNative ? null : { label: '数据备份目录',  	name: 'backup', slot: v => <PickFolder {...v}/>,  maxLen:35, width, r:1},
				{ label: '数据库', 			name: 'database', 		r:1, maxLen:10, width },
				{ label: '前端访问地址', 	name: 'url', 			maxLen:60, width },
				{ label: 'api 地址', 		name: 'api_url', 		maxLen:60, width },
				{ label: 'mongo 地址', 		name: 'mg_url', 		maxLen:60, width },
				!$config.isNative ? null : { label: 'sql 地址', 		name: 'sql_url', 		maxLen:60, width },
				!$config.isNative ? null : { label: 'redis 地址', 		name: 'redis_url', 		maxLen:60, width },
			]
		}
	}
	const config = {
		page : {
			// title: '新闻管理',
			controls	: [
				{ label:'新增', mode:'add', r:1 },
				// { mode:'del', abs:1 },
				{ mode:'refresh'}
			]
		},
		search : {
			data:[
				{ label: '项目名称', 	name:'title' },
			]
		},
		table: {
			api 		: 'project',
			clearCache 	: ['project/dict', 'project/database'],
			addConfig,
			cols		: [
				{ title: '项目名称', 			dataIndex: 'title', 		width:150 },
				!$config.isNative ? null : { title: '后台开发目录', 		dataIndex: 'folder', 		width:200 },
				!$config.isNative ? null : { title: '前端开发目录', 		dataIndex: 'folder_front', 	width:200 },
				{ title: '数据库名', 			dataIndex: 'database', 		width:80 },
				{ title: 'Mongodb 地址', 		dataIndex: 'mg_url', 		width:300 },
				!$config.isNative ? null : { title: '数据库地址', 			dataIndex: 'sql_url', 		width:300 },
				!$config.isNative ? null : { title: 'Redis 地址', 			dataIndex: 'redis_url', 	width:250 },
				!$config.isNative ? null : { title: '数据备份目录', 		dataIndex: 'backup', 		width:250 },
				{ title: '前端访问地址', 		dataIndex: 'url', 			width:250, render: text => {
					if( text ){
						return <div style={{width:180}} className='omit'><Button label={text} type='link' antd={{href:text, target:'_black'}} /></div>
					}
				} },
				{ title: '接口地址', 			dataIndex: 'api_url', 		width:250 },
			],
			rowClassName : ( { enabled } ) => enabled ? 'jz-row-yes' : '',
			controls 	: {
				width: 200,
				data: ({ id, enabled }) => [
					{ mode:'mod', config:addConfig, rs:0 }, 
					{ mode:'delPop' },
					{ label:enabled ? '禁用' : '启用', gray:!enabled, disabled: enabled, mode:'confirm', abs:1, r:1, id, api:'project/enabled'}
				]
			}
		}
	}
	return <SearchTable {...config}/>
}
export default Component